<template>
  <Modal v-model="visible"
         title="系统参数配置"
         :closable="false"
         :width="800"
         :mask-closable="false">
    <Form ref="dataForm" :model="dataForm" :rules="ruleValidate" :label-width="120">
      <FormItem label="键值" prop="paramKey">
        <Input v-model="dataForm.paramKey" placeholder="键值" clearable></Input>
      </FormItem>
      <FormItem label="参数值" prop="paramValue">
        <vue-json-editor v-model="paramValueJsonObj" :modes="[]" mode="code" :showBtns="false" @json-change="onJsonChange"></vue-json-editor>
      </FormItem>
      <FormItem label="可用状态">
        <i-switch size="large" v-model="dataForm.status" :true-value="1" :false-value="0">
          <span slot="open">正常</span>
          <span slot="close">禁用</span>
        </i-switch>
      </FormItem>
      <FormItem label="参数说明" prop="remark">
        <Input v-model="dataForm.remark" placeholder="说明" clearable></Input>
      </FormItem>
    </Form>
    <div slot="footer">
      <Button type="text" @click="visible = false">取消</Button>
      <Button type="primary" :loading="showLoading" @click="handleSubmit">保存</Button>
    </div>
  </Modal>
</template>
<script>
// https://github.com/dirkliu/vue-json-editor json编辑器 基于https://github.com/josdejong/jsoneditor封装
import vueJsonEditor from 'vue-json-editor'
export default {
  data () {
    return {
      visible: false,
      showLoading: false,
      // value: '',
      dataForm: {
        id: 0,
        paramKey: '',
        paramValue: '',
        status: 1,
        remark: ''
      },
      paramValueJsonObj: {},
      ruleValidate: {}
    }
  },
  components: {
    // JsonEditor
    vueJsonEditor
  },
  methods: {
    init (id) {
      // 获取配置项
      this.$refs['dataForm'].resetFields();
      this.paramValueJsonObj = {};
      this.visible = true;
      this.dataForm.id = id || 0;
      if (this.dataForm.id) {
        this.$http({
          url: this.$http.adornUrl(`/sys/config/info/${this.dataForm.id}`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataForm.paramKey = data.config.paramKey;
            this.dataForm.paramValue = data.config.paramValue;
            this.dataForm.status = data.config.status;
            this.dataForm.remark = data.config.remark;
            this.paramValueJsonObj = JSON.parse(data.config.paramValue);
          }
        })
      }
    },
    handleCancel () {
      this.visible = false;
      this.showLoading = false;
      this.paramValueJsonObj = {};
    },
    onJsonChange (value) {
      this.dataForm.paramValue = value ? JSON.stringify(value) : '';
    },
    handleSubmit () { // 表单提交
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.showLoading = true;
          this.$http({
            url: this.$http.adornUrl(`/sys/config/${this.dataForm.id ? 'update' : 'save'}`),
            method: 'post',
            data: this.$http.adornData(this.dataForm)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$Message.success({
                content: '操作成功',
                duration: 2,
                onClose: () => {
                  this.handleCancel();
                  this.$emit('refreshDataList')
                }
              });
            } else {
              this.$Message.error(data.msg);
              this.showLoading = false;
            }
          })
        }
      })
    }
  }
}
</script>
<style scoped>

</style>
